<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">工单明细主键id</label>
        <el-input v-model="query.workDetailId" clearable placeholder="工单明细主键id" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">工单头id</label>
        <el-input v-model="query.workHeadId" clearable placeholder="工单头id" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">所属项目名称</label>
        <el-input v-model="query.projectName" clearable placeholder="所属项目名称" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">所属项目ID</label>
        <el-input v-model="query.projectId" clearable placeholder="所属项目ID" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">工单标题</label>
        <el-input v-model="query.workDetailName" clearable placeholder="工单标题" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">提问人</label>
        <el-input v-model="query.startUser" clearable placeholder="提问人" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">处理人</label>
        <el-input v-model="query.endUser" clearable placeholder="处理人" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">工时(人/天)</label>
        <el-input v-model="query.workHours" clearable placeholder="工时(人/天)" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">分类(1:新增需求,2:常规运维)</label>
        <el-input v-model="query.questionClassification" clearable placeholder="分类(1:新增需求,2:常规运维)" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">类型(1:bug处理,2:功能优化,3:系统优化,4:数据处理)</label>
        <el-input v-model="query.questionType" clearable placeholder="类型(1:bug处理,2:功能优化,3:系统优化,4:数据处理)" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">所属机构</label>
        <el-input v-model="query.enterprise" clearable placeholder="所属机构" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <date-range-picker
          v-model="query.endTime"
          start-placeholder="endTimeStart"
          end-placeholder="endTimeStart"
          class="date-item"
        />
        <date-range-picker
          v-model="query.startTime"
          start-placeholder="startTimeStart"
          end-placeholder="startTimeStart"
          class="date-item"
        />
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="所属项目ID" prop="projectId">
            未设置字典，请手动设置 Select
          </el-form-item>
          <el-form-item label="工单标题" prop="workDetailName">
            <el-input v-model="form.workDetailName" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="工单描述" prop="questionDescription">
            <el-input v-model="form.questionDescription" :rows="3" type="textarea" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="解决办法" prop="questionSolution">
            <el-input v-model="form.questionSolution" :rows="3" type="textarea" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.remark" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="排序" prop="orderNumber">
            <el-input v-model="form.orderNumber" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="提问人" prop="startUser">
            <el-input v-model="form.startUser" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="处理人" prop="endUser">
            <el-input v-model="form.endUser" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="处理时间" prop="endTime">
            <el-date-picker v-model="form.endTime" type="datetime" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="提问时间" prop="startTime">
            <el-date-picker v-model="form.startTime" type="datetime" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="工时(人/天)" prop="workHours">
            <el-input v-model="form.workHours" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="分类(1:新增需求,2:常规运维)" prop="questionClassification">
            <el-select v-model="form.questionClassification" filterable placeholder="请选择">
              <el-option
                v-for="item in dict.work_classification"
                :key="item.id"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="类型(1:bug处理,2:功能优化,3:系统优化,4:数据处理)" prop="questionType">
            <el-select v-model="form.questionType" filterable placeholder="请选择">
              <el-option
                v-for="item in dict.work_type"
                :key="item.id"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="所属机构">
            未设置字典，请手动设置 Select
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="info" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table border stripe highlight-current-row stripe ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column align="center" prop="projectName" label="所属项目名称" />
        <el-table-column align="center" prop="createBy" label="创建者" />
        <el-table-column align="center" prop="updateBy" label="更新者" />
        <el-table-column align="center" prop="createTime" label="创建日期" />
        <el-table-column align="center" prop="updateTime" label="更新时间" />
        <el-table-column align="center" prop="workDetailName" label="工单标题" />
        <el-table-column align="center" prop="questionDescription" label="工单描述" />
        <el-table-column align="center" prop="questionSolution" label="解决办法" />
        <el-table-column align="center" prop="remark" label="备注" />
        <el-table-column align="center" prop="orderNumber" label="排序" />
        <el-table-column align="center" prop="startUser" label="提问人" />
        <el-table-column align="center" prop="endUser" label="处理人" />
        <el-table-column align="center" prop="endTime" label="处理时间" />
        <el-table-column align="center" prop="startTime" label="提问时间" />
        <el-table-column align="center" prop="workHours" label="工时(人/天)" />
        <el-table-column align="center" prop="questionClassification" label="分类(1:新增需求,2:常规运维)">
          <template slot-scope="scope">
            {{ dict.label.work_classification[scope.row.questionClassification] }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="questionType" label="类型(1:bug处理,2:功能优化,3:系统优化,4:数据处理)">
          <template slot-scope="scope">
            {{ dict.label.work_type[scope.row.questionType] }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="enterprise" label="所属机构" />
        <el-table-column v-if="checkPer(['admin','workOrderDetail:edit','workOrderDetail:del'])" label="操作" width="200px" align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
  import crudWorkOrderDetail from '@/api/workOrder/workOrderDetail'
  import CRUD, { presenter, header, form, crud } from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'

  const defaultForm = { workDetailId: null, workHeadId: null, projectName: null, createBy: null, updateBy: null, createTime: null, updateTime: null, projectId: null, workDetailName: null, questionDescription: null, questionSolution: null, remark: null, isDelete: null, orderNumber: null, startUser: null, endUser: null, endTime: null, startTime: null, workHours: null, questionClassification: null, questionType: null, enterprise: null }
  export default {
    name: 'WorkOrderDetail',
    components: { pagination, crudOperation, rrOperation, udOperation },
    mixins: [presenter(), header(), form(defaultForm), crud()],
    dicts: ['work_classification', 'work_type'],
    cruds() {
      return CRUD({ title: '工单明细', url: 'api/workOrderDetail', idField: 'workDetailId', sort: 'orderNumber,desc', crudMethod: { ...crudWorkOrderDetail }})
    },
    data() {
      return {
        permission: {
          add: ['admin', 'workOrderDetail:add'],
          edit: ['admin', 'workOrderDetail:edit'],
          del: ['admin', 'workOrderDetail:del']
        },
        rules: {
          workHeadId: [
            { required: true, message: '工单头id不能为空', trigger: 'blur' }
          ],
          projectId: [
            { required: true, message: '所属项目ID不能为空', trigger: 'blur' }
          ],
          workDetailName: [
            { required: true, message: '工单标题不能为空', trigger: 'blur' }
          ],
          questionDescription: [
            { required: true, message: '工单描述不能为空', trigger: 'blur' }
          ],
          questionSolution: [
            { required: true, message: '解决办法不能为空', trigger: 'blur' }
          ],
          orderNumber: [
            { required: true, message: '排序不能为空', trigger: 'blur' }
          ],
          startUser: [
            { required: true, message: '提问人不能为空', trigger: 'blur' }
          ],
          endUser: [
            { required: true, message: '处理人不能为空', trigger: 'blur' }
          ],
          endTime: [
            { required: true, message: '处理时间不能为空', trigger: 'blur' }
          ],
          startTime: [
            { required: true, message: '提问时间不能为空', trigger: 'blur' }
          ],
          workHours: [
            { required: true, message: '工时(人/天)不能为空', trigger: 'blur' }
          ],
          questionClassification: [
            { required: true, message: '分类(1:新增需求,2:常规运维)不能为空', trigger: 'blur' }
          ],
          questionType: [
            { required: true, message: '类型(1:bug处理,2:功能优化,3:系统优化,4:数据处理)不能为空', trigger: 'blur' }
          ]
        },
        queryTypeOptions: [
          { key: 'workDetailId', display_name: '工单明细主键id' },
          { key: 'workHeadId', display_name: '工单头id' },
          { key: 'projectName', display_name: '所属项目名称' },
          { key: 'projectId', display_name: '所属项目ID' },
          { key: 'workDetailName', display_name: '工单标题' },
          { key: 'startUser', display_name: '提问人' },
          { key: 'endUser', display_name: '处理人' },
          { key: 'workHours', display_name: '工时(人/天)' },
          { key: 'questionClassification', display_name: '分类(1:新增需求,2:常规运维)' },
          { key: 'questionType', display_name: '类型(1:bug处理,2:功能优化,3:系统优化,4:数据处理)' },
          { key: 'enterprise', display_name: '所属机构' }
        ]
      }
    },
    methods: {
      // 钩子：在获取表格数据之前执行，false 则代表不获取数据
      [CRUD.HOOK.beforeRefresh]() {
        return true
      }
    }
  }
</script>

<style scoped>

</style>
